<template>
  <div class="order-list-container">
    <div class="tab">
      <!-- tab选项卡 -->
      <Tab :info="tabs" class="tab-item" tabKey="name" />
      <!-- 输入内容 -->
      <div class="input-content">
        <input type="text" placeholder="输入商品名称或订单搜索">
        <button>搜索</button>
      </div>
    </div>
    <!-- 订单列表 -->
    <div class="order-list">
      <OrderItem />
    </div>
  </div>
</template>

<script>
import Tab from '@/components/Tab'
import OrderItem from '@/components/order/OrderItem'

export default {
  data () {
    return {
      tabs: [
        { id: 1, name: '全部订单' },
        { id: 2, name: '待付款' },
        { id: 3, name: '待发货' },
        { id: 4, name: '已发货' },
        { id: 5, name: '待评价' }
      ]
    }
  },

  components: {
    Tab,
    OrderItem
  }
}
</script>

<style lang="less" scoped>
@import "../../styles/variable.less";

.order-list-container {
  .tab {
    display: flex;
    justify-content: space-between;
    .tab-item {
      width: 600px;
    }
    .input-content {
      align-items: center;
      display: flex;
      input {
        border: 1px solid @border-grey;
        border-right: 0px;
        font-size: 12px;
        width: 240px;
        height: 28px;
        outline: none;
        padding: 0px 12px;
      }
      button {
        background-color: @bg-grey;
        border: 1px solid @border-grey;
        border-radius: 0;
        color: @font-color;
        font-size: 12px;
        width: 50px;
        height: 28px;
        padding: 0;
        text-align: center;
        outline: none;
      }
    }
  }
}
</style>
